// 定义懒加载插件

// 引入初始样式文件
import "@/styles/common.scss";

import { useIntersectionObserver } from "@vueuse/core";

export const lazyPlugin = {
  install(app) {
    // 懒加载指令逻辑

    // 定义全局指令

    app.directive("img-lazy", {
      // mounted(el,binding)
      // el绑定的那个元素 img
      // binding :binding.value 指令等于号后面绑定的表达式的值 图片url
      // Vueuse实现图片懒加载  useIntersectionObserve
      mounted(el, binding) {
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          console.log(isIntersecting);
          if (isIntersecting) {
            // 进入视口区域 在这里进行图片懒加载
            el.src = binding.value;
            stop();
          }
        });
      },
    });
  },
};
